/**
 * @file header.tsx
 * @description 顶部导航栏
 */
import React, {useState} from 'react';
import {
  HStack,
  IconButton,
  Icon,
  Text,
  Heading,
  Input,
} from 'native-base';
import { View } from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import * as Device from '../utils/device';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';


interface RootProps {
  leftBtn?: boolean;
  navigation: any;
  title?: string;
  search?: boolean;
  searchTitle?: string;
  parentMethod?: (message: string) => void;
  rightBtn?: any;
}

const HeaderScreen: React.FC<RootProps> = ({
  leftBtn = true,
  navigation,
  title = '',
  search = false,
  searchTitle,
  parentMethod,
  rightBtn,
}) => {
  const insets = useSafeAreaInsets();
  const [searchText, setSearchText] = useState(''); // 搜索内容

  /**
   * @description 搜索
   */
  const handleSearch = () => {
    parentMethod && parentMethod(searchText.trim());
  };

  return (
    <>
      <View
        style={{
          width: '100%',
          height: insets.top,
          backgroundColor: '#4F94F9',
        }}></View>
      <HStack
        bg="#4F94F9"
        w="100%"
        h={Device.baseNavBarHeight}
        alignItems="center"
        justifyContent="space-between">
        {/* 返回 */}
        {leftBtn?  <IconButton
          icon={
            <Icon
              size="lg"
              as={MaterialIcons}
              name="arrow-back"
              color="white"
              onPress={() => {
                navigation.goBack();
              }}
            />
          }
        /> : <Text h="34" w="34"></Text>}
        {/* 标题 */}
        {search == false && title?.length > 0 ? (
          <Heading size="xs" color="white" textAlign="center" maxW="250">
            {title}
          </Heading>
        ) : null}
        {/* 搜索 */}
        {search ? (
          <Input
            placeholder={ searchTitle? searchTitle:'请输入'}
            returnKeyType="search"
            onChangeText={text => setSearchText(text)}
            variant="filled"
            bg="white"
            bgColor="white"
            onEndEditing={handleSearch}
            width="80%"
            h="34"
            borderRadius="34"
            py="1"
            px="2"
            InputLeftElement={
              <Icon
                ml="2"
                size="4"
                color="gray.400"
                as={<MaterialIcons name="search" />}
              />
            }
          />
        ) : null}
        {/* 右边按钮 */}
        {rightBtn ? (
          <IconButton
            icon={
              <Icon
                size="lg"
                as={MaterialIcons}
                name="menu"
                color="white"
                onPress={() => {
                  navigation.goBack();
                }}
              />
            }
          />
        ) : <Text h="34" w="34"></Text>}
      </HStack>
    </>
  );
};
export default HeaderScreen;
